<template>
  <div id="CustomModule">
    <body-container>
      <section v-for="(form,i) in formDataList" :key="i">
        <h3 class="l-title">模块{{ i + 1 }}</h3>
        <vj-form @submit="onSubmit(form,sectionIds[i])" hide-reset ref="forms" :loading="loading" class="vj-form" :cfg-list="cfgList"
                 :form-data.sync="formDataList[i]"/>
      </section>
    </body-container>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {AboutFM, CustomModuleFM, GameFM} from "@/config/form";
import {hookSubmit, times} from "vijay-util";
import BodyContainer from "@/components/layout/body-container.vue";
import {Mixins, Ref} from "vue-property-decorator";
import {FormMixin} from "@/plugins/mixins/form";
import {requestByGet, requestByPut} from "@/utils/request";

@Component({
  components: {BodyContainer}
})
export default class CustomModule extends Mixins(FormMixin) implements ComponentOptions<Vue> {
  name = "CustomModule"
  cfgList = CustomModuleFM;
  formDataList = [];
  sectionIds = [];
  @Ref() forms!: any;

  async onSearch() {
    const {records} = await requestByGet(`qqc/qqcCustomize/list`);
    this.formDataList = records;
    this.sectionIds = records.map(({id})=>id);
  }

  created() {
    this.onSearch();
  }

  @hookSubmit()
  async onSubmit(form,id) {
    await requestByPut(`qqc/qqcCustomize/edit`,{...form,id});
    this.$message.success("操作成功！");
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#CustomModule {
  padding-bottom: 20px;

  .l-title {
    font-size: 16px;
    padding: 20px 0 20px 5px;
  }
}
</style>
